import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {AtProgress} from 'taro-ui'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {getRuntime,partOf,pageSize} from '../../utils/common'

import './index.less'
import icon_71_on from '../../assets/img/icon_71_on.png'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items:[],
    totalCount:0,
    pageIndex:1,
    pageSize,
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'公益' })
    this.getPagedPublicWelfare()
  }

  getPagedPublicWelfare() {
    let { PublicWelfareStore }  = this.props.stores
    let { pageIndex,pageSize } = this.state
    PublicWelfareStore.getPagedPublicWelfare({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getPagedPublicWelfare()
      })
    }
  }

  /**
   * 获取百分比
   * @param x 分子(已募捐金额)
   * @param y 分母(需要募捐总数)
   */
  getPercentage(x: number,y: number = 1) {
    let res:any = (x/y).toFixed(2)
    if(res >= 1) res = 1
    return res*100
  }
  render() {
    let { items } = this.state
    return (
      <View className='welfare-index'>
        <View className='column-wrap'>
          <View className='column-title content-30'>
            <View className='colume-name'>支持他(她)</View>
          </View>
        </View>

        <View className='list-15 '>
          {items.length>0&&
            items.map(item => {
              return(
                <View className='list-15-item' onClick={this.handelRouter.bind(this,'/pages/public_welfare/welfare_detail?id='+item.id)}>
                  <Image className='img' src={item.logoImg}/>
                  <View className='info'>
                    <View className='line line1'>
                      <View className='list-title'>{item.name}</View>
                      <View className='progress'>
                        <AtProgress percent={this.getPercentage(item.sumMoney,item.amountOfApplication)} color='#de5932' isHidePercent={true} />
                      </View>
                      <Text className='count'>{item.allCountPeople}</Text>
                      <Text className='percentage'>{this.getPercentage(item.sumMoney,item.amountOfApplication)}%</Text>
                    </View>
                    <View className='line line2'>
                      <Text className='list-desc'>{partOf(item.introduce,50)}</Text>
                      <Image className='btn-support' src={icon_71_on}/>
                    </View>
                  </View>
                </View>
              )
            })
          }
          {items.length<=0&&<View className='page-none-info'>没有更多信息了。。。</View>}
        </View>
        <View className='interval' />
      </View>
    )
  }
}

export default Index
